<template>
    <div class="times">
        <div class="c-title-5 i-tips" :class="{ choose: kline.curInterval.name == item.name }" v-for="item in keeps"
            :key="item.name" @click.stop="onChooseTime(item)">
            {{ item.type == 0 ? "Tick" : item.description }}
        </div>

        <v-menu transition="slide-y-reverse-transition" origin="start" v-model="popMenu" open-on-hover
            close-on-content-click>
            <template v-slot:activator="{ props }">
                <div class="ti-box" v-bind="props">
                    <span class="iconfont icon-sanjiaoxing"></span>
                </div>
            </template>
            <v-list>
                <div class="w-list-box c-title-5" @click.stop>
                    <!-- <div class="w-title">选择周期</div> -->
                    <div class="w-title">{{ $t("message.timer.a") }}</div>
                    <div class="w-list">
                        <div class="w-item" :class="{ has: kline.curInterval.name == item.name }" v-for="item in maps"
                            @click="onChooseTime(item, true)">{{ item.type == 0 ? "Tick" : item.description }}</div>
                    </div>
                </div>
            </v-list>
        </v-menu>

        <div class="rec-t cursor-link" @click="openPop('indicator')">
            <img src="@/assets/zbiao.png" class="rec-img lg-img" />
            <span class="zb-tip c-title-5">
                {{ $t("message.CoinState.f") }}
            </span>
        </div>

        <div style="margin-left: auto;border-left:none;cursor: pointer;" class="rec-t cursor-link tvad">
            <!-- <img src="@/assets/camera.png" class="rec-img lg-img carm" /> -->
            <!-- <span class="iconfont">&#xe60d;</span> -->
            <span class="zb-tip c-title-5" style="color:#FCC235;">
                {{ $t("message.CoinState.base") }}
            </span>
            <span class="zb-tip c-title-5" @click="OpenTradView">
                TradingView
            </span>
            <div class="redDotv" v-if="fedDotTv"></div>

        </div>
        <div class="rec-t cursor-link r-tv" @click="onToggleRecommend">
            <div v-if="kline.hasRed" class="redDot">
            </div>
            <TimeTips :text="$t('message.timer.b')"> <img src="@/assets/yibiao.png" class="rec-img" /></TimeTips>
            <div class="red-dot" v-if="kline.hasRed"></div>
            <!-- <span class="iconfont icon-yibiaopan"></span> -->
            <!-- <span class="zb-tip c-title-5">推荐列表</span> -->
            <!-- <span class="zb-tip c-title-5">{{ $t("message.timer.b") }}</span> -->
        </div>
        <div style="border: none;" class="rec-t cursor-link r-tv" @click="onToggleLink">
            <TimeTips :text="$t('message.timer.c')"> <img src="@/assets/music.png" class="rec-img" /></TimeTips>

            <!-- <span class="zb-tip c-title-5">链上活动</span> -->
            <!-- <span class="zb-tip c-title-5">{{ $t("message.timer.c") }}</span> -->
        </div>
        <div class="rec-t cursor-link r-tv" style="border: none;" @click="Open">

            <TimeTips :text="$t('message.CoinState.ff')"><img src="@/assets/camera.png" class="rec-img lg-img carm" />
            </TimeTips>

            <!-- <span class="zb-tip c-title-5">
                {{ $t("message.CoinState.ff") }}
            </span> -->
        </div>
        <!-- <div class="rec-t cursor-link" @click="onPopInfo" v-show="showInfoCir && kline.curCoin?.tokenAddress">
            <img src="@/assets/svg/position.svg" class="rec-img lg-img carm" />

            <span class="zb-tip c-title-5">
                {{ $t("message.CoinState.h") }}
            </span>
        </div> -->
        <!-- <div class="rec-t cursor-link" @click="openPop('swicth')">
            <span class="iconfont">&#xe661;</span>
            <span class="zb-tip c-title-5">
                {{ $t("message.CoinState.i") }}
            </span>
        </div> -->

        <!-- <div class="maxmin" @click="toggleSize">
            <span class="iconfont icon-actualsize" v-if="layout.maxChart" title="还原"></span>
            <span class="iconfont icon-actualsize1" v-else title="最大化"></span>
        </div> -->
        <TableNews></TableNews>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, watch, ref, computed } from "vue";
import { Bus, CHART_KLINE_SUBSCRIBE_TIME, KLINE_RANK_FLUCTUATION_ALL, KLINE_RANK_WAVE, SizeChart } from "@/connetion/Bus";
import { useKline } from "@/stores/kline";
import { useCore } from "@/hooks/useCore";
import { useIndicator } from "@/stores/indicator";
import { useSwitch } from "@/stores/switchBox";

import html2canvas from "html2canvas";
import * as htmlToImage from 'html-to-image';
import { YShare } from "@/components/y-share/script";
import { useLayout } from "@/stores/layout";
import TableNews from "./tableNews.vue"
import { useTradingView } from "@/stores/tradingVIew";
import TimeTips from "@/components/timeTips/index.vue";
import { Core } from "@/comm/Core";

let tradView = useTradingView()
const core = useCore();
const indicator = useIndicator();
const swicth = useSwitch();

const kline = useKline();
const layout = useLayout();

const emit = defineEmits(["toggleRecommend"]);
const keeps = ref<any[]>([]);

const popMenu = ref(false);
let names: string[] = [];
const newsShow = ref(false)
const hasInfo = ref(true);
const fedDot = ref<any>(Core.ins.isRedDot("DATE_FEATUREDDOT"));
const fedDotTv = ref<any>(Core.ins.isRedDot("DATE_TRADINGVIEW"));

const showInfoCir = computed(() => {
    if (kline.curInterval) {
        return kline.curInterval.name !== "S1";
    }
    return false;
});
const maps = computed(() => {
    if (kline.map && kline.map.length && kline.curCoin) {
        return kline.curCoin.intervals;
    }
    return [];
});

const toggleSize = () => {
    layout.toggleSize();
    if (layout.maxChart) {
        layout.chartsMax(window.innerHeight - layout.heightData)

        // console.log("点击了还原",window.innerHeight - 300)

    } else {
        layout.chartsMax(window.innerHeight - 300)

        // console.log("点击了放大",window.innerHeight - 135)


    }
    console.log("change size", layout.maxChart)
}

watch(
    () => kline.curCoin,
    (newVal: any, oldVal: any) => {
        console.log("tos", newVal, oldVal);
        resetKeeps();
    }
);
// 切换TradView
function OpenTradView() {
    tradView.changeType('TradingView')
    layout.toggleChartsLoading(true)
    Core.ins.clearRedDot("DATE_TRADINGVIEW");
}
const resetKeeps = () => {
    // console.log(names, "resetKeepsresetKeeps")
    // console.log("resetKeeps");
    if (kline.curCoin && kline.curCoin.intervals) {
        let t = kline.curCoin.intervals;
        if (names.length) {
            keeps.value = names.map(i => {
                return t.find(j => j.name == i)
            })
        }
        else {
            keeps.value = [t[0], t[2], t[3], t[5]];
            if (keeps.value.find(i => i.name == kline.curInterval.name)) {
                // console.log("has +++++");
            }
            else {
                keeps.value[3] = t.find(i => i.name == kline.curInterval.name);
                // console.log("reset +++++");
            }
            // console.log(keeps,"keepskeepskeepskeeps")

        }
    }
};
const onPopInfo = () => {
    console.log('触发打开持仓')
    hasInfo.value = false;
    newsShow.value = true
    layout.changePopPosition(true);
}
const hideNews = (e: any) => {
    console.log('触发隐藏持仓')
    newsShow.value = false
    if (e) {
        document.removeEventListener('click', e)
    }
}
// 打开不同的弹窗 同时关闭
function openPop(type: string) {
    if (type == 'swicth') {
        swicth.togglePopSwitch()
        indicator.changePopIndicator(false)
    } else {
        swicth.changePopSwitch(false)
        indicator.togglePopIndicato()

        layout.toggleMedium(true)
        layout.$state.chartsHeight = window.innerHeight - layout.heightData;
        Bus.emit(SizeChart);
    }
}

const onChooseTime = async (item: any, change = false) => {
    // console.log("jsz", "time------", item);
    let cycle: any = {
        'MN1': "1",
        'MN5': "5",
        'MN15': "15",
        'MN30': "30",
        'H1': "60",
        'H4': "240",
        'D1': "1D",
        'W1': "1W",
    }
    setTimeout(() => {
        popMenu.value = false;
    }, 500);

    await core.switchInterval(item);

    Bus.emit(CHART_KLINE_SUBSCRIBE_TIME, item.name);
    Bus.emit(KLINE_RANK_FLUCTUATION_ALL, item.name);

    if (change) {
        if (keeps.value.indexOf(item) == -1) {
            keeps.value.pop();
            keeps.value.push(item);
        }
    }

    names = keeps.value.map(i => i.name);
    console.log("names", names, item)
    localStorage.setItem('K_TIME', item.name)
    localStorage.setItem('resolution', cycle[item.name])

};

onMounted(() => {
    console.log("jsz", kline.curInterval, "当前时间");
    if (keeps.value.length == 0) {
        resetKeeps();
    }
});

const onToggleRecommend = () => {
    kline.changeLinkVisible(false);

    emit("toggleRecommend");
    Core.ins.clearRedDot("DATE_FEATUREDDOT");
    fedDot.value = false;
    // layout.toggleMedium(true)
    // layout.$state.chartsHeight = window.innerHeight - layout.heightData;
    // Bus.emit(SizeChart);
    if (kline.hasRed) {
        Core.ins.clearRedDot("DATE_RECOMMEND");
        kline.hasRed = false;
    }
};

const onToggleLink = () => {
    kline.chilageTableRecommend(false)
    kline.changeLinkVisible(!kline.linkVisible);
};

// 点击切换开关
function tickSwitch() {

}
async function Open() {
    const char: HTMLCanvasElement = document.querySelector("#chart-box")!;
    const color = char.parentElement!.style.background;
    char.style.background = "var(--card)";
    document.getElementById("shuiying")!.style.visibility = "visible";
    // const canvas = await html2canvas(char);
    htmlToImage.toCanvas(char).then(function (canvas) {
        // document.body.appendChild(canvas);
        YShare.open(canvas, "Share or download chart image", "Chart");
        char.style.background = color;
    });
}
</script>

<style lang="less" scoped>
.times {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    gap: 1px;
    height: 43px;
    border-top: 1px solid #252930;
    border-bottom: 5px solid #252930;
    color: #b1b6c6;
    margin: 0 var(--space);
    background: var(--card);

    // background: rgba(0, 0, 0, 0.5);

    .i-tips {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 0 10px;
        transition: all 1s;
        cursor: default;

        &:hover {
            color: #fff;
        }
    }

    .choose {
        color: var(--main);
        pointer-events: none;
    }
}

// .r-tv{
//     img{
//         width: 20px !important;
//         height: 20px !important;
//         vertical-align: middle !important;
//     }
// }
.c-title-5 {
    font-size: 14px !important;
}

.zb-line {
    width: 120px;

    .zb-txt {
        flex: 1;
    }
}

.zb-btn {
    display: flex;
    align-items: center;
    padding-left: 20px;
    border-left: solid 1px #252930;

    .zb-img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        margin-right: 4px;
    }
}

.zb-tip {
    padding-top: 2px;
    text-wrap: nowrap;
    text-transform: capitalize;

    &:hover {
        color: #fff;
    }
}

.check-ico {
    width: 18px;
    height: 18px;
    object-fit: contain;
    background: var(--main);
    border-radius: 50%;
    overflow: hidden;
}

.signal {
    margin-left: 30px;
    gap: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.icon-yibiaopan {
    font-size: 16px;
}

.rec-t {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 12px;
    padding-left: 12px;
    border-left: solid 1px #2b3038;
    position: relative;

    .redDot {
        position: absolute;
        content: "";
        top: 1px;
        left: 25px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        z-index: 1;
        background-color: #ff0000;
    }

    .redDotv {
        position: absolute;
        content: "";
        top: 6px;
        right: -4px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        z-index: 1;
        background-color: #ff0000;
    }

    .rec-img {
        width: 18px;
        height: 18px;
        object-fit: contain;
        // position: relative;
        vertical-align: middle;

    }

    .lg-img {
        width: 20px;
        height: 20px;
    }

    .carm {
        width: 18px;
        height: 18px;
        vertical-align: middle;

    }

    .icon-naozhong {
        font-size: 16px;
    }
}

.red-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #ff0000;
    border-radius: 50%;
    z-index: 1;
    top: 1px;
    left: 25px;
}

.ti-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    height: 100%;

    &:hover {
        .icon-sanjiaoxing {
            transform: scale(0.72) rotate(180deg);
        }
    }

    .icon-sanjiaoxing {
        font-size: 12px;
        transform: scale(0.72);
        transition: all 200ms;
    }
}

.w-list-box {
    background: #1e2329;
    width: 330px;
    border-radius: 4px;
    padding: 4px 0 20px;

    .w-title {
        color: #b1b6c6;
        margin: 20px;
    }

    .w-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding-inline-start: 20px;

        .w-item {
            cursor: pointer;
            width: 64px;
            height: 26px;
            background: #353b42;
            border-radius: 2px;
            display: flex;
            justify-content: center;
            align-items: center;

            &:hover {
                background: #3d4247;
            }

            &.has {
                background: #423e2e;
                color: #fcc235;
            }
        }
    }
}

.maxmin {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--card);
    margin-left: auto;
    margin-right: 10px;
    color: #b1b6c6;

    .iconfont {
        font-size: 20px;
    }

    .icon-actualsize1 {
        font-size: 22px;
    }

    &:hover {
        color: var(--main);
    }
}
</style>
